<template>

	<view class="wrapper bg">
		<Header>
			<template #left>
				<text>分类</text>
			</template>
		</Header>
		<u-grid>
			<u-grid-item v-for="item in specialList" :key="item._id">
				<Item :show="show" :item="item"></Item>
			</u-grid-item>

		</u-grid>
		<u-loadmore :status="status" />
	</view>
</template>

<script setup>
	import Item from '../../components/item/item.vue'
	import Header from '../../components/header/header.vue'
	import { getSpecial1 } from '../../utils/api.js'
	let show = ref(false)
	let specialList = ref([])
	let pageNum = 1
	let flag = ref(true)
	let status = ref('loadmore')
	onLoad(async () => {
		let res3 = await getSpecial1(pageNum)
		specialList.value = res3.data
	})
	onReachBottom(async () => {
		if (flag.value) {
			status.value = 'loading'
			let newarr = []
			pageNum++
			let res3 = await getSpecial1(pageNum)
			if (res3.data.length == 0) {
				status.value = 'nomore'
				flag.value = false
				return
			}
			newarr = res3.data
			specialList.value = [...specialList.value, ...newarr]
		}
	})
</script>

<style scoped lang='scss'>
	.wrapper {
		padding: 15rpx;
	}
</style>